<template>
  <div class="home">
    <div class="navigator">
      <div class="logo">
        <el-image :src="logo" style="width: 78%;" />
        <!-- <div class="divider"></div> -->
      </div>
      <ul class="nav-items">
        <li v-for="item in navs" :key="item.path">
          <!--          <el-tooltip effect="light" :content="item.title" placement="right">-->
          <!--            -->
          <!--          </el-tooltip>-->
          <a @click="changeNav(item)" :class="item.path === curPath ? 'active' : ''">
            <el-image :src="item.icon_path" :width="14" v-if="item.icon_path"
              style="padding: 12px;box-sizing: border-box;" />
            <i :class="'iconfont icon-' + item.icon" v-else></i>
          </a>
          <div :class="item.path === curPath ? 'title active' : 'title'">{{ item.title }}</div>
        </li>
      </ul>
      <!-- 用户信息 -->
      <div class="tool-box userInfo">
        <el-dropdown :hide-on-click="true" class="user-info" trigger="click" v-if="isLogin">
          <span class="el-dropdown-link" style="cursor: pointer;">
            <el-image :src="loginUser.avatar" />
            <!-- <span class="username">{{ loginUser.nickname }}</span> -->
            <!-- <el-icon>
              <ArrowDown />
            </el-icon> -->
          </span>
          <template #dropdown>
            <el-dropdown-menu style="width: 296px;">
              <el-dropdown-item @click="goToUserInfo">
                <el-icon>
                  <Tools />
                </el-icon>
                <span>账户信息</span>
              </el-dropdown-item>
              <el-dropdown-item @click="logout">
                <i class="iconfont icon-logout"></i>
                <span>注销</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <router-view v-slot="{ Component }">
        <transition name="move" mode="out-in">
          <component :is="Component"></component>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>

import { useRouter } from "vue-router";
import { checkSession } from "@/action/session";
import { isMobile } from "@/utils/libs";
import { onMounted, ref } from "vue";
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage, ElMessageBox } from "element-plus";
import { getSessionId, getUserToken, removeUserToken } from "@/store/session";
import { activelyClose, titleDoc } from './store'

const loginUser = ref(null);
const isLogin = ref(false)

const router = useRouter();
const logo = '/images/log.png';
// const isVip = ref(false)
const navs = ref([
  { path: "/chat", icon_path: "/images/msg.png", title: "对话" },
  // {path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
  // {path: "/sd", icon_path: "/images/sd.png", title: "SD 绘画"},
  // {path: "/apps", icon: "menu", title: "应用中心"},
  // {path: "/images-wall", icon: "image-list", title: "作品展示"},
  // {path: "/knowledge", icon: "book", title: "知识库"},
  // { path: "/invite", icon: "share", title: "推广" },
])
const curPath = ref(router.currentRoute.value.path)

const changeNav = (item) => {
  curPath.value = item.path
  // if (item.path === '/member') router.push()
  router.push(item.path === '/member' ? item.path + '?status=Pay' : item.path)
}
onMounted(() => {
  checkSession().then(res => {
    loginUser.value = res
    isLogin.value = true
  })
  // 获取系统配置
  httpGet("/api/admin/config/get?key=system").then(res => {
    titleDoc.value = res.data.title
    document.title = titleDoc.value
    // if (res.data['member']) {
    //   // navs.value.splice(1, 0, { path: "/member", icon: "vip-user", title: "会员" })
    //   navs.value.push({ path: "/member", icon: "vip-user", title: "会员" })
    // }
    // if (res.data['promotion']) {
    //   // navs.value.splice(2, 0, { path: "/invite", icon: "share", title: "推广" })
    //   navs.value.push({ path: "/invite", icon: "share", title: "推广" })
    // }
  }).catch(e => {
    ElMessage.error("获取系统配置失败：" + e.message)
  })
})
const goToUserInfo = () => {
  router.push('/member?status=Info')
}
const logout = function () {
  activelyClose.value = true;
  httpGet('/api/user/logout').then(() => {
    removeUserToken();
    router.push('/login');
  }).catch(() => {
    ElMessage.error('注销失败！');
  })
}
// const showConfig = function () {
//   showConfigDialog.value = true;
// }
// const clearAllChats = function () {
//   ElMessageBox.confirm(
//     '确认要清空所有的会话历史记录吗?<br/>此操作不可以撤销！',
//     '操作提示：',
//     {
//       confirmButtonText: '确认',
//       cancelButtonText: '取消',
//       type: 'warning',
//       dangerouslyUseHTMLString: true,
//       showClose: true,
//       closeOnClickModal: false,
//       center: true,
//     }
//   ).then(() => {
//     httpGet("/api/chat/clear").then(() => {
//       ElMessage.success("操作成功！");
//       chatData.value = [];
//       chatList.value = [];
//       newChat();
//     }).catch(e => {
//       ElMessage.error("操作失败：" + e.message)
//     })
//   }).catch(() => {
//   })
// }
// const logout = function () {
//   activelyClose.value = true;
//   httpGet('/api/user/logout').then(() => {
//     removeUserToken();
//     router.push('/login');
//   }).catch(() => {
//     ElMessage.error('注销失败！');
//   })
// }
</script>

<style lang="stylus" scoped>
@import '@/assets/iconfont/iconfont.css';
.home {
  display: flex;
  background-color: #F7F8FA;
  min-height 100vh
  width 100%
  height 100%
  .navigator {
    display flex
    flex-flow column
    width 70px
    min-height 100%
    padding 10px 6px
    border-right: 1px solid #F0F2F5

    .logo {
      display flex
      flex-flow column
      align-items center


      .divider {
        border-bottom 1px solid #4A4A4A
        width 80%
        height 10px
      }
    }

    .nav-items {
      margin-top: 20px;
      padding-left: 10px;
      padding-right: 10px;
      // border-right:1px #F0F2F5 solid

      li {
        margin-bottom 15px

        a {
          color #61636b
          // background-color #40444A
          border-radius 10px
          width 48px
          height 48px
          display flex
          justify-content center
          align-items center
          cursor pointer

          .el-image {
            border-radius 10px
          }

          .iconfont {
            font-size 20px
          }
        }

        a:hover, a.active {
          color #19213D
          background-color:#fafafa;
          box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.1)
        }

        .title {
          font-size: 12px
          padding-top: 5px
          color: #666F8D;
          text-align: center;
        }

        .active {
          color #19213D
        }
      }
    }
  }

  .content {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
  }

}
</style>

<style>
.userInfo {
  position: absolute;
  bottom: 20px;
  left: 24px;
  margin: 0 auto;
}

.userInfo .el-image__inner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
</style>
